<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>手风琴风格</title>
	<link rel="shortcut icon" type="image/x-icon" href="http://okowaawz9.bkt.clouddn.com/favicon.ico" media="screen" />
</head>
<style>
	*{
		margin: 0px;
		padding: 0px;
	}
	ul{
		width: 960px;
		height: 300px;
		margin: 100px auto;
		border: 1px solid #000;

	}
	ul li{
		list-style: none;
		width: 160px;
		height: 300px;
		background: red;
		float: left;
		border: 1px solid #000;
		box-sizing: border-box;
		overflow: hidden;
		/*transition-property: width;
		transition-duration: 1s;*/
		transition: width 0.5s;

	}
	ul li img{
		height: 300px;
	}
	ul:hover li{
		width: 100px;
	}
	ul li:hover{
		width: 460px;
	}
	.blackToFirst{
			width: 50px;
			height: 100px;
			background: #ccc;
			display: inline-block;
			position: fixed;
			right: 50px;
			bottom: 50px;
		  
		}
		.btf{
			width: 50px;
			height: 58px;
			background: url(http://okowaawz9.bkt.clouddn.com/iconFloat.png) left -59px no-repeat;
		}
		.blackToFirst a{
			display: inline-block;
			width: 50px;
			height: 58px;
			background: rgba(255,255,255,0.5);
		}
		.blackToFirst a:hover{
			display: inline-block;
			width: 50px;
			height: 58px;
			background: rgba(125,125,125,0.5);
		}
		.bts{
			width: 50px;
			height: 58px;
			background: url(http://okowaawz9.bkt.clouddn.com/iconFloat.png) left -118px no-repeat;
		}
</style>
<body>
	  <ul>
	  	<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1486298852&di=cd0536e6315474adc834b0444351b158&imgtype=jpg&er=1&src=http%3A%2F%2Fi4.piimg.com%2F11340%2F7f638e192b9079e6.jpg" alt=""></li>
	  	<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1486298895&di=0ea776b6c37585243b852ba2f7751209&imgtype=jpg&er=1&src=http%3A%2F%2Fimage103.360doc.com%2FDownloadImg%2F2017%2F01%2F2904%2F90248410_23.jpeg" alt=""></li>
	  	<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1485694463&di=a5e5be2e5165b7035834dd740e113d93&src=http://img.taopic.com/uploads/allimg/130805/318750-130P50UZ736.jpg" alt=""></li>
	  	<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1486298944&di=227d7acbbd8c3e64a1f4d227c290b5ed&imgtype=jpg&er=1&src=http%3A%2F%2Ffmn.rrimg.com%2Ffmn056%2Fxiaozhan%2F20111206%2F1205%2Fp%2Fm2w700hq85lt_x_large_syeR_528800001c461263.jpg" alt=""></li>
	  	<li><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1854474737,2384202738&fm=23&gp=0.jpg" alt=""></li>
	  	<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1485704281804&di=be223b2727dec2de24d0bda3d6f319f2&imgtype=0&src=http%3A%2F%2Fimgstore.cdn.sogou.com%2Fapp%2Fa%2F100540002%2F481521.jpg" alt=""></li>
	  </ul>
	<div class="blackToFirst">
		<div class="bts" title="回到顶部"><a href="#"></a></div>
		<div class="btf" title="回到首页"><a href="index.html"></a></div>
	</div>
</body>
</html>
